<div class="underlying" style="width:100%;display: flex;flex-direction: row;flex-wrap: wrap;">
  <div class="table">
    <!-- 头部Table -->
    <nz-table #nestedTable style="border-collapse: collapse; border-radius: 4px 4px 0px 0px;" [nzData]="listOfData"
      class="designTable" [nzShowPagination]='false' [nzScroll]="{ x: '1850px',y:'760px' }">
      <thead class="tableHeard" style="text-align: center !important;">
        <tr style="text-align: center !important;">
          <th nzWidth="50px"></th>
          <th nzWidth="50px"></th>
          <th nzWidth="250px">工聯單號</th>
          <th nzWidth="250px">治具名稱</th>
          <th nzWidth="150px">數量</th>
          <th nzWidth="150px">姓名</th>
          <th nzWidth="250px">聯係方式</th>
          <th nzWidth="365px">派件時間</th>
          <th nzWidth="150px">領取人</th>
          <th nzWidth="150px">送貨區域</th>
        </tr>
      </thead>
      <!-- 工联单Table -->
      <tbody class="tablecontent" style="border-left: 1px solid rgba(71,156,156,1) !important;">
        <ng-container>
          <tr id="first" *ngFor="let item of listOfData let key = index">
            <!-- new -->
            <td style="padding-left: 4px;text-align: left; height:45px">
              <a *ngIf="item.starttime === '' && item.endtime === ''" class="new"></a>
            </td>
            <!-- 派件 -->
            <td>
              <a class="delivery" (click)="delivery(item)"></a>
            </td>
            <!-- 工联单号 -->
            <td style="max-width: 250px;text-align: left;text-indent: 40px;">{{item.union_order}}</td>
            <!-- 治具名稱 -->
            <td
              style="cursor:pointer;max-width: 250px; text-indent: 15px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;text-align: left;"
              title={{item.name}}>{{item.name}}</td>
            <!-- 數量 -->
            <td>{{item.quatity}}</td>
            <td>{{item.OwnerName}}</td>
            <td>{{item.OwnerTel}}</td>

            <!-- 派件時間 -->
            <td>{{item.starttime === '' && item.endtime === '' ? '' : item.starttime + ' ~ ' + item.endtime}}</td>
            <!-- 领取人 -->
            <td>{{item.lingqu_ren}}</td>
            <!-- 送貨區域 -->
            <td>{{item.addr}}</td>
          </tr>
        </ng-container>
      </tbody>
    </nz-table>
    <!-- 治具派件 -->
    <nz-modal class="addTime" [(nzVisible)]="addDelivery" nzTitle="派件時間" (nzOnCancel)="CancelDelivery()"
      (nzOnOk)="DeliveryOk()" style="text-align:center" nzWidth="600px"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px'}">
      <div style="width: 600px;">
        <div class="input_first" style="padding-top: 25px;">
          <div class="right">起始時間：</div>
          <nz-date-picker [nzAllowClear]=false nzShowTime nzFormat="yyyy-MM-dd HH:mm" nzPlaceHolder="Select Time"
            [(ngModel)]="startValue" [nzDisabledDate]="disabledDate"
            [nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }" (ngModelChange)="onStartChange($event)">
          </nz-date-picker>
        </div>
        <div class="input_first" style="padding-top: 40px;">
          <div class="right">結束時間：</div>
          <nz-date-picker [nzAllowClear]=false nzShowTime nzFormat="yyyy-MM-dd HH:mm" nzPlaceHolder="Select Time"
            [(ngModel)]="endValue" [nzDisabledDate]="disabledDate"
            [nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }" (ngModelChange)="onEndChange($event)">
          </nz-date-picker>
        </div>
      </div>
    </nz-modal>
    <!-- 确认治具派件 -->
    <nz-modal [(nzVisible)]="twoOk" nzTitle="派件" (nzOnCancel)="twoOkCancel()" (nzOnOk)="TwoOk()"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'30px'}">
      <p style="padding-top: 50px;">確認派送治具嗎？</p>
      <p>{{deliveryUnionorder}}</p>
    </nz-modal>
  </div>
</div>